<template>
  <div class="box">
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="margin: 40px"
      label-position="left"
    >
      <el-form-item
        label="商品分类"
        hide-required-asterisk="true"
        :rules="rules.classify"
      >
        <el-select v-model="form.classify">
          <el-option
            selected="selected"
            disabled="disabled"
            style="display: none"
            value=""
          ></el-option>
          <el-option label="手机" value="shanghai"></el-option>
          <el-option label="手机壳" value="beijing"></el-option>
          <el-option label="充电线" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称" :rules="rules.name">
        <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品简介">
        <el-input
          type="textarea"
          v-model="form.Description"
          placeholder="请输入商品简介(100字)"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品价格" :rules="rules.price">
        <el-input v-model="form.price" type="number"></el-input>
      </el-form-item>
      <el-form-item label="商品售卖价" :rules="rules.Saleprice">
        <el-input v-model="form.Saleprice" type="number"></el-input>
      </el-form-item>
      <el-form-item label="商品库存" :rules="rules.stock">
        <el-input v-model="form.stock" type="number"></el-input>
      </el-form-item>
      <el-form-item label="商品标签">
        <el-input v-model="form.tag" placeholder="请输入商品小标签"></el-input>
      </el-form-item>
      <el-form-item label="上架状态">
        <template>
          <el-radio v-model="radio" label="1">上架</el-radio>
          <el-radio v-model="radio" label="2">下架</el-radio>
        </template>
      </el-form-item>
      <!-- <el-form-item label="商品主图" :rules="rules.picture">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
         
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item> -->
    </el-form>
  </div>
</template>
<script>
let imgupdata = null;
export default {
  name: "AddUser",
  data() {
    return {
      // 单选
      radio: "1",
      imgurl: "",
      dialogVisible: false,
      rules: {
        classify: [
          {
            required: true,
            message: "请输入商品分类名称",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur",
          },
        ],
        price: [
          {
            required: true,
            message: "请输入商品价格",
            trigger: "blur",
          },
        ],
        stock: [
          {
            required: true,
            message: "请输入商品库存",
            trigger: "blur",
          },
        ],
        Saleprice: [
          {
            required: true,
            message: "请输入商品售卖价",
            trigger: "blur",
          },
        ],
        picture: [
          {
            required: true,
            message: "请上传商品照片",
            trigger: "blur",
          },
        ],
      },
      form: {
        //   商品价格
        price: "",
        // 商品售卖价
        Saleprice: "",
        // 商品名称
        name: "",
        // 商品分类
        classify: "",
        // 商品库存
        stock: "",
        // 商品标签
        tag: "",

        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        //商品简介
        Description: "",
      },
    };
  },
  methods: {
    onSubmit() {
      
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 添加图片
    addimg() {
      if (!imgupdata) {
        // 生成文件上传的控件
        imgupdata = document.createElement("input");
        imgupdata.setAttribute("type", "file");
        imgupdata.style.display = "none";
        //  监听事件
        if (window.addEventListener) {
          // ie9及上的浏览器识别
          imgupdata.addEventListener("change", this.uploadfile, false);
        } else {
          // ie8及以下浏览器识别
          imgupdata.attachEvent("onchange", this.uploadfile);
        }
        document.body.appendChild(imgupdata);
      }
      imgupdata.click();
    },
    uploadfile(el) {
      if (el && el.target && el.target.files && el.target.files.length > 0) {
        console.log(el);
        const files = el.target.files[0];
        // 判断是否为图片格式
        if (files.type.indexOf("image") === -1) {
          console.log("请选择图片文件");
        } else {
          const that = this;
          const reader = new FileReader(); //创建读取文件对象
          // 发起异步请求，读取文件
          reader.readAsDataURL(el.target.files[0]);
          // 文件读取成功
          reader.onload = function () {
            that.imgurl = this.result;
            // console.log(this.result);
            // 数据传到后台
            // const formDate=new FormData();
            // 传到后台的数据
            // formDate.append('file',files);
            // console.log(formDate);
          };
        }
      }
    },
  },
  created() {
   
  },
};
</script>
<style lang="scss" scoped>
// .main {
//   // box-shadow: ;
//   border: 1px solid #ccc !important;
// }
.box {
  //   height: 100%;
  width: 1075px;
  //   background: chocolate !important;
  margin: 0px 0px 0px 20px !important;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !important;
}

.el-input,
.el-textarea,
.el-select {
  width: 300px !important;
}
</style>
